<template>
	<view class="proitem">
		<view class="pic">
			<!-- 组件里面css最好别使用标签,据说小程序会报错-->
			<image class="img" :src="item.picurls" mode="aspectFill"></image>
		</view>
		<view class="text">
			<view class="title">{{item.name}}</view>
			<view class="price">
				<view class="big">
					￥{{item.price}}
				</view>
				<view class="small" v-if="item.preprice">
					￥{{item.preprice}}
				</view>
			</view>
			<view class="discount" v-if="item.preprice">
				<!--截取当前数据到小数点后1位四舍五入 -->
				{{(item.price/item.preprice).toFixed(1)*10}}折
			</view>
			<view class="numbox">
				<view class="skuSelect" v-if="false">选规格</view>
				<view class="uNum" v-else>
					<!-- 传给步进器的是从数据库获得的listProduct,里面有id -->
					<numbox :item="item"></numbox>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "productItem",
		props: {
			item: {
				type: Object,
				default () { //Object必须传递一个方法
					return {}
				}
			}
		},
		data() {
			return {

			};
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.proitem {
		width: 100%;
		height: 200rpx;
		@include flex-box();
		padding: 25rpx 0;

		.pic {
			width: 170rpx;
			height: 170rpx;

			.img {
				width: 100%;
				height: 100%;
			}
		}

		.text {
			flex: 1;
			padding: 0 0 0 20rpx;
			position: relative;

			.title {
				font-size: 35rpx;
				font-family: "微软雅黑";
				font-weight: bold;
				@include ellipsis();
			}

			.price {
				@include flex-box-set(start, end); //垂直方向end对齐,水平方向start对齐
				font-weight: bold;
				padding: 25rpx 0;

				.big {
					font-size: 35rpx;
					color: $price-color;
				}

				.small {
					font-size: 30rpx;
					opacity: 0.5;
					padding: 0 0 0 10rpx;
					text-decoration: line-through;
				}
			}

			.discount {
				font-size: 26rpx;
				color: $brand-theme-color;
				border: 1rpx solid;
				display: inline-block;
				padding: 1rpx 10rpx;
				border-radius: 5rpx;
			}

			.numbox {
				position: absolute;
				right: 0;
				bottom: 0;

				.skuSelect {
					font-size: 28rpx;
					height: 40rpx;
					padding: 0 10rpx;
					background: $brand-theme-color-aux;
					color: #ffffff;
				}
			}
		}
	}
</style>
